<template>
    <div>
        <search-bar></search-bar>
        <!-- 菜单 -->
        <div class="content">
            <div class="left">
                <div @click="changeHandle(item.cat_id)" v-for="item in listData" :key="item.cat_id" :class="['menu-item',currentIndex==item.cat_id?'active':'']">{{item.cat_name}}</div>
            </div>
            <div class="right">
                <!-- 右侧分类信息 -->
                <div class="brand-item" v-for="item in rightData" :key="item.cat_id">
                     <div class="brand-title">{{item.cat_name}}</div>
                     <div class="brand-list">
                         <div class="brand" v-for="(brand,i) in item.children" :key="i">
                              <img :src="brand.cat_icon" alt="">
                              <p>{{brand.cat_name}}</p>
                         </div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SearchBar from '../../components/SearchBar.vue'
import request from '../../utils/request.js'
export default {
    data() {
        return {
           listData:[],
           currentIndex:1
        }
    },
    created() {
        this.initData()
    },
    computed: {
        rightData() {
            let rd=this.listData.filter(item=>{
                return item.cat_id==this.currentIndex
            })
            return rd.length>0?rd[0].children:""
        }
    },
    components:{
        SearchBar
    },
    methods: {
        changeHandle(id) {
            this.currentIndex=id
        },
        async initData() {
            let res=await request('categories')
            this.listData=res.data.message
        }
    },
}
</script>

<style scoped lang="less">
    @import './main.less';
</style>

